<template>
  <div class="implement-wrapper">
    <el-dialog
      title="执行明细"
      class="tableDialog tableFormDialog"
      width="1100px"
      :visible.sync="implementFormVisible">
      <div class="total">
        <p><span>已过磅{{this.netWeightCount}}车</span><span>合计{{this.netWeightNum}}吨</span></p>
      </div>
      <div class="implement-table">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="transport.truckNumber" label="车牌号" width="130"></el-table-column>
          <el-table-column prop="driver.name" label="司机"></el-table-column>
          <el-table-column prop="driver.phone" label="司机电话" width="150"></el-table-column>
          <el-table-column prop="truckAxle.axle" label="车型" width="140"></el-table-column>
          <el-table-column prop="weightTime" label="毛重过磅时间" width="210"></el-table-column>
          <el-table-column prop="poundRoom.name" label="毛重磅房" width="110"></el-table-column>
          <el-table-column prop="weight.originalWeight" label="运量" width="91"></el-table-column>
        </el-table>
      </div>
      <div class="implement-bottom">

        <div class="pages">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.pageNo"
            :page-size="page.pageSize"
            background
            layout="total, prev, pager, next"
            :total="page.total">
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="implementFormVisible = false">确 定</el-button>
        <el-button @click="implementFormVisible = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getExcuteDetailList } from '@/api/transplan/transplan.js'
    export default {
      name: 'implementForm',
      data () {
        return {
          implementFormVisible: false,
          tableData: [],
          loading: false,
          page: {
            pageSize: 10,
            pageNo: 1,
            total: 0
          },
          transportPlanId: '',
          netWeightCount: 0,
          netWeightNum: 0,
          currentPage1: 5
        }
      },
      methods: {
        init (method, row) {
          if (method === 'implement') {
            this.implementFormVisible = true
            console.log(1003)
            console.log(row)
            this.transportPlanId = row.id
            this.netWeightCount = row.netWeightCount
            this.netWeightNum = row.netWeightNum
            this.getExcuteDetailList()
          }
        },
        getExcuteDetailList () {
          this.loading = true
          getExcuteDetailList({
            transportPlanId: this.transportPlanId
          }).then(({data}) => {
            if (data.code === '200') {
              this.tableData = data.result.list
              this.page.total = data.result.count
              console.log(this.tableData)
              this.loading = false
            }
          })
        },
        handleSizeChange (val) {
          console.log(`每页 ${val} 条`)
        },
        handleCurrentChange (val) {
          console.log(`当前页: ${val}`)
        }
      }
    }
</script>

<style lang="scss" scoped>
.implement-wrapper{
  ::v-deep.el-dialog{
    width: fit-content;

    .el-dialog__header{
      padding: 0 20px !important;
      height: 41px;
      line-height: 41px;
    }

    .el-dialog__headerbtn{
      top: 11px;
    }
    .el-dialog__title{
      font-size: 16px;
      color: #333333;
    }
    .el-dialog__body{

      .implement-table{
        .el-table {
          th{
            height: 36px;
            padding: 0;
          }
          tr.el-table__row--striped td{
            background: #F7F7F7;
          }
          /*td,th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{*/
          /*  border-right: 1px solid #DDDDDD;*/
          /*}*/
          .el-table__row{
            td:last-child{
              .cell{
                padding-right: 10px;
              }
            }
            .cell{
              p{
                margin: 0;
              }
            }
          }
        }
      }
      .total{
        p{
          margin: 0 0 10px;
        }
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 32px;
        span{
          margin-right: 25px;
        }
      }

      .el-form-item__error{
        padding-top: 4px !important;
        color: #FF3E3E;
      }

    }
  }
}
</style>
